<template>
  <div>
    <el-page-header :icon="null" title="新闻管理">
      <template #content>
        <span class="text-large font-600 mr-3"> 发布新闻 </span>
      </template>
    </el-page-header>

    <el-card>
      <el-form ref="newsFormRef" :model="newsForm" :rules="newsFormRules" label-width="80px" class="demo-ruleForm"
        status-icon>
        <!-- 新闻标题 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="newsForm.title" />
        </el-form-item>

        <!-- 新闻内容 -->
        <el-form-item label="内容" prop="content">
          <Editor @event="handleChange"></Editor>
        </el-form-item>

        <!-- 文章分类 -->
        <el-form-item label="分类" prop="category">
          <el-select v-model="newsForm.category" placeholder="请选择文章分类" style="width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 文章封面 -->
        <el-form-item label="封面" prop="cover">
          <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false" :auto-upload="false" :on-change="handleChange">
            <img v-if="newsForm.cover" :src="newsForm.cover" class="cover" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>

        <!-- 是否发布 -->
        <el-form-item label="是否发布" prop="ispublish">
          <el-select v-model="newsForm.ispublish" placeholder="选择是否发布" style="width: 100%;">
            <el-option v-for="item in publish" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 发布新闻 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布新闻</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import Editor from '@/components/editor/Editor'
const router = useRouter()
// import axios from 'axios'
// import { ElMessage } from 'element-plus'

const newsFormRef = ref()

// 表单域响应对象
const newsForm = reactive({
  title: '',
  content: '',
  category: 1, // 文章分类：1最新动态，2典型案例，3通知公告
  cover: '',// 文章封面
  ispublish: 0, // 是否发布：0已发布， 1未发布
  file: null
})

// 表单校验
const newsFormRules = reactive({
  title: [
    { required: true, message: '请输文章标题', trigger: 'blur' },
    { min: 5, max: 20, message: '用户名长度大于5小于20', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' },
  ],
  category: [{ required: true, message: '请选择文章分类', trigger: 'blur' }],
  cover: [{ required: true, message: '请选择文章封面', trigger: 'blur' }],
  ispublish: [{ required: true, message: '文章是否发布', trigger: 'blur' }],
})

// 文章分类
const options = [
  {
    label: '最新动态',
    value: 1
  },
  {
    label: '典型案例',
    value: 2
  },
  {
    label: '通知公告',
    value: 3
  }
]
// 是否发布
const publish = [
  {
    label: '已发布',
    value: 0
  },
  {
    label: '未发布',
    value: 1
  }
]

const handleChange = () => {
  console.log(1111)
}

// 提交新闻
const submitForm = (data) => {
  console.log(data)
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 30px;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

// .avatar {
//   width: 178px;
//   height: 178px;
// }
</style>